import "package:flutter/material.dart";

class TabBottomBarItem extends StatefulWidget {
  String? imageUrl; //未选中图片地址
  String? selectedImageUrl; //选中图片地址
  IconData? iconName; //未选中图标名称
  IconData? selectedIconName; //选中的图标名称
  String? label; //标题
  late int index; //所在下标
  late int currentIndex; //来自父容器的下标值
  Function(int)? onTap; //点击回调
  late Color iconColor; //图标颜色
  late double iconSize; //图标尺寸
  late Color selectedIconColor; //选中图标颜色
  late double selectedIconSize; //选中图标尺寸
  late double labelFontSize; //标题文字尺寸
  late double selectedLabelFontSize; //选中标题文字尺寸
  late Color labelColor; //文字颜色
  late Color selectLabelColor; //选中文字颜色
  late ValueNotifier? notifier; //监听父组件值改变

  TabBottomBarItem(
      {super.key,
      this.imageUrl,
      this.selectedImageUrl,
      this.iconName,
      this.selectedIconName,
      this.label});
  @override
  State<StatefulWidget> createState() {
    return _TabBottomBarItemState();
  }
}

class _TabBottomBarItemState extends State<TabBottomBarItem> {
  @override
  void initState() {
    widget.notifier?.addListener(() {
      // print("子菜单监听到值改变了${widget.currentIndex}");
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // print('当前菜单值:${widget.currentIndex}');
    Widget tabItemCover;
    if (widget.imageUrl != null && widget.selectedImageUrl != null) {
      // 如果存在图片，则优先使用图片
      String _url = widget.currentIndex == widget.index
          ? widget.selectedImageUrl as String
          : widget.imageUrl as String;
      tabItemCover = Image.asset(
        _url,
        fit: BoxFit.cover,
        width: 40,
        height: 40,
      );
    } else {
      // 使用图标
      Color color = widget.currentIndex == widget.index
          ? widget.selectedIconColor
          : widget.iconColor;
      double size = widget.currentIndex == widget.index
          ? widget.selectedIconSize
          : widget.iconSize;
      tabItemCover = Icon(
        widget.iconName,
        color: color,
        size: size,
      );
    }
    return Expanded(
      flex: 1,
      child: GestureDetector(
        onTap: () {
          setState(() {
            // print('菜单点击:${widget.index}');
            if (widget.onTap != null) widget.onTap!(widget.index);
          });
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            tabItemCover,
            Padding(
              padding: const EdgeInsets.only(top: 4, bottom: 6),
              child: Text(
                widget.label ?? '',
                style: TextStyle(
                  fontSize: widget.currentIndex == widget.index
                      ? widget.selectedLabelFontSize
                      : widget.labelFontSize,
                  color: widget.currentIndex == widget.index
                      ? widget.selectLabelColor
                      : widget.labelColor,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
